<script lang="ts" setup>
import { computed, inject } from 'vue';

const props = withDefaults(defineProps<{ span?: number, flex?: string | number }>(), {
    span: 0,
    flex: 1
});

const gutter = inject('gutter', 0)

const classNames = computed(() => {
    return {
        [`umrp-col-${props.span}`]: props.span > 0
    };
});

const styles = computed(() => {
    const newStyles: Record<string, string> = {}

    if (typeof props.flex === 'number' && props.span === 0) {
        newStyles.flex = `${props.flex}`
    } else if (typeof props.flex === 'string') {
        newStyles.width = props.flex
    }

    // Handle gutter safely
    if (typeof gutter === 'number' && gutter > 0) {
        const padding = `${gutter / 2}px`
        newStyles.paddingLeft = padding
        newStyles.paddingRight = padding
    } else if (Array.isArray(gutter) && gutter.length > 0) {
        newStyles.paddingLeft = `${gutter[0] / 2}px`
        newStyles.paddingRight = `${gutter[0] / 2}px`
        newStyles.paddingTop = `${gutter[1] / 2}px`
        newStyles.paddingBottom = `${gutter[1] / 2}px`
    }

    return newStyles
})
</script>

<template>
    <div class="umrp-col" :class="classNames" :style="styles">
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
.umrp-col {
    box-sizing: border-box;

    @for $i from 1 through 24 {
        &-#{$i} {
            width: calc($i / 24) * 100%;
        }
    }
}
</style>